<!-- 必填信息 -->
<template>
  <div class="gl_contentBox gl_heightFull noPadding">
    <div class="top_title">{{ title }}</div>
    <div class="form_content">
      <el-form
        ref="declareVO"
        v-loading="loading"
        :model="declareVO"
        label-width="110px"
        size="small"
        :rules="declareVO_Rules"
        @submit.native.prevent
      >
        <el-row :gutter="20">
          <el-col class="form_item">
            <el-form-item label="申报名称" prop="name">
              <el-input v-if="handlerType !== 'inquiry'" v-model.trim="declareVO.name" maxlength="40" placeholder="请输入申报名称" />
              <div v-else>{{ formData.name }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="申报机构" prop="trainningTypeId">
              <el-tag v-for="(item, index) in organList" :key="index" class="gl_mr_15" style="margin-top:4px">{{ item.organizationUnitName }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11" class="form_item">
            <el-form-item label="考点编号">
              <el-input v-if="handlerType !== 'inquiry'" v-model.trim="declareVO.examNumber" maxlength="40" placeholder="请输入考点编号" />
              <div v-else>{{ formData.placeNo }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2" class="form_item">
            <el-form-item label="考试日期" prop="entryStartTime">
              <el-input v-show="false" v-model.trim="declareVO.entryStartTime" />
              <el-date-picker
                v-if="handlerType !== 'inquiry'"
                v-model="entryTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%;"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                @change="handleEntryTime"
              />
              <div v-else>
                <span v-if="formData.startTime">
                  {{ formData.startTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
                </span> 至
                <span v-if="formData.endTime">
                  {{ formData.endTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
                </span></div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11" class="form_item">
            <el-form-item label="考试地点" prop="provinceCode">
              <span :title="addressDataForCheck">{{ addressDataForCheck }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2" class="form_item">
            <el-form-item label="详细地址" prop="address">
              <el-input v-if="handlerType !== 'inquiry'" v-model.trim="declareVO.address" placeholder="详细地址具体到街道" />
              <div v-else>{{ formData.address }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="11" class="form_item">
            <el-form-item label="联系人" prop="contactPerson">
              <el-input v-if="handlerType !== 'inquiry'" v-model.trim="declareVO.contactPerson" maxlength="20" placeholder="请输入联系人" />
              <div v-else>{{ formData.contact }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2" class="form_item">
            <el-form-item label="联系人电话" prop="contactPhoneNumber">
              <el-input v-if="handlerType !== 'inquiry'" v-model.trim="declareVO.contactPhoneNumber" placeholder="请输入联系人电话" />
              <div v-else>{{ formData.phoneNumber }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="申报级段位" prop="route">
          <el-checkbox-group v-model="formData.duanIds" :disabled="true">
            <span v-for="item in duanList" :key="item.id">
              <el-checkbox v-if="formData.duanIds.includes(item.id)" :label="item.id">{{ item.fullName }}</el-checkbox>
            </span>
          </el-checkbox-group>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="11" class="form_item">
            <el-form-item label="资质">
              <el-button v-if="formData.qualificationFileUrl" icon="el-icon-download" size="mini"><el-link v-if="formData.qualificationFileUrl" type="primary" :href="getStaticFileUrl(formData.qualificationFileUrl)" target="_blank">资质</el-link></el-button>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2" class="form_item">
            <el-form-item label="附件">
              <el-button v-if="formData.attachmentUrl" icon="el-icon-download" size="mini"><el-link v-if="formData.attachmentUrl" type="primary" :href="getStaticFileUrl(formData.attachmentUrl)" target="_blank">附件</el-link></el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 审批后增加字段  考试内容 批复文件 驳回原因 考官 -->
        <template v-if="handlerType === 'inquiry' && declareDTO.requestStatusCode === 'Approved'">
          <el-form-item label="考官">
            <el-tag v-for="(item, index) in declareDTO.officials" :key="index" class="gl_mr_15">{{ '姓名：' + item.name + '  考官编号：' + item.no }}</el-tag>
          </el-form-item>
          <el-row v-if="handlerType === 'inquiry'" :gutter="20">
            <el-col :span="11" class="form_item">
              <el-form-item label="考试内容">
                <el-link v-if="declareDTO.examContentUrl" type="primary" target="_blank" :href="getStaticFileUrl(declareDTO.examContentUrl)">考试内容</el-link>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2" class="form_item">
              <el-form-item label="批复文件">
                <el-link v-if="declareDTO.replyFileUrl" type="primary" target="_blank" :href="getStaticFileUrl(declareDTO.replyFileUrl)">批复文件</el-link>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template>
          <el-form-item
            v-if="handlerType === 'inquiry' && declareDTO.requestStatusCode === 'Approved' || declareDTO.requestStatusCode === 'NotApproved'"
            :label="declareDTO.requestStatusCode === 'NotApproved' ? '驳回原因' : '备注信息'"
          >
            <div>{{ declareDTO.approveComment }}</div>
          </el-form-item>
        </template>
      </el-form>
      <el-row class="func_btn">
        <el-col :span="24" align="center">
          <el-button type="default" size="mini" @click="goBack()">取消</el-button>
          <el-button type="default" :disabled="throughbtn" size="mini" @click="through()">通过</el-button>
          <el-button type="primary" :disabled="passbtn" size="mini" @click="pass()">驳回</el-button>
        </el-col>
      </el-row>
    </div>
    <Through ref="through" />
    <Pass ref="Pass" />
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { SiSTKWTrainCreateTrainningInput } from '@/lib/form/train/swaggerForm';
import validator from '@/lib/validate/index.js';
import Through from './components/through.vue';
import Pass from './components/pass.vue';
import { api_GET_ClubDuanExamRequestId, api_GET_ClubDuan } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubDuanExamRequestIdQO, Api_GET_ClubDuanQO } from '@/lib/form/hall/swaggerForm';
export default {
  components: {
    Through,
    Pass
  },
  props: {
    gameId: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      declareDTO: {},
      duanList: [],
      throughbtn: false,
      passbtn: false,
      Api_GET_ClubDuanExamRequestIdQO: new Api_GET_ClubDuanExamRequestIdQO(), // 获取单个考试信息
      formData: {}, // 表单数据
      // 一下数据没有
      handlerType: 'inquiry',
      title: '级段位申报',
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/document`,
      declareVO: new SiSTKWTrainCreateTrainningInput(),
      declareVO_old: new SiSTKWTrainCreateTrainningInput(),
      loading: false,
      api_POST_CompetitionDTO: {},
      areaList: [], // 地区
      entryTime: [], // 报名日期
      declareId: '',
      declareVO_Rules: { // 必填项，验证密码格式
        name: [
          validator.required('申报名称不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkNameLen(value, '申报名称数限制50字以内'));
            },
            trigger: 'blur'
          }
        ],
        organization: [
          {
            validator(rule, value, callback) {
              callback(validator.checkArray(value, '申报机构不能为空'));
            },
            trigger: 'blur'
          }
        ],
        entryStartTime: [validator.required('考试日期不能为空', 'change')],
        address: [validator.required('考试地点不能为空', 'change')],
        detailaddress: [validator.required('详细地址不能为空', 'change')],
        provinceCode: [validator.required('地区选择不能为空', 'change')],
        cityCode: [validator.required('地区选择不能为空', 'change')],
        countyCode: [validator.required('地区选择不能为空', 'change')],
        contactPerson: [validator.required('联系人不能为空')],
        contactPhoneNumber: [
          validator.required('联系人电话不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, '手机号码格式错误'));
            },
            trigger: 'blur'
          }
        ],
        startTime: [validator.required('日期不能为空', 'change')],
        endTime: [validator.required('日期不能为空', 'change')],
        disclaimerNotice: [validator.required('免责声明不能为空', 'change')],
        regulation: [validator.required('竞赛规程不能为空', 'change')]
      },
      organList: [],
      organTagList: [],
      selectedLevel: ['三级', '六级'],
      selectedSegment: ['九段', '十段']
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache,
      info: state => state.user.info
    }),
    // 根据所在地区Code找到对应name
    addressDataForCheck () {
      const _provinceCode = this.formData.provinceCode;
      const _cityCode = this.formData.cityCode;
      const _countyCode = this.formData.countyCode;
      let _provinceData;
      let _cityData;
      let _countyData;
      if (_provinceCode && this.cache.district) {
        _provinceData = this.cache.district.find(item => item.code === _provinceCode);
      }
      if (_cityCode && _provinceData) {
        _cityData = _provinceData.children.find(item => item.code === _cityCode);
      }
      if (_countyCode && _cityData) {
        _countyData = _cityData.children.find(item => item.code === _countyCode);
      }
      console.log(_provinceData, _provinceCode, 'ssssssss');
      return `${_provinceData ? _provinceData.name : ''} ${_cityData ? _cityData.name : ''} ${_countyData ? _countyData.name : ''}`;
    }
  },
  watch: {
    gameId: {
      handler(val) {
        if (val) {
          this.declareId = val;
        }
      }
    }
  },
  created() {
    this.getDict();
    this.getDictByType(['district']);
    this.declareId = this.$route.query.id || this.$route.params.id;
    // 编辑
    this.getGameInfo();
    this.getDuanList();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    init() {
      this.$refs.declareVO.resetFields();
      this.areaList = [];
      this.entryTime = [];
      // 文件上传初始化
      this.$refs.entryNoticeUpload.init();
    },
    // 获取级段位列表
    getDuanList() {
      const qo = new Api_GET_ClubDuanQO();
      qo.MaxResultCount = 999;
      qo.IsEnabled = true;
      this.loading = true;
      qo.IncludeBeltDuanType = true;
      qo.IncludeBeltLevelType = true;
      qo.IncludeLevelDuanType = true;
      qo.Sorting = 'creationTime DESC';
      api_GET_ClubDuan(qo).then(res => {
        this.duanList = res.items;
        this.loading = false;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取详情
    getGameInfo() {
      this.loading = true;
      this.Api_GET_ClubDuanExamRequestIdQO.IncludeRequestOrganizationUnits = true;
      this.Api_GET_ClubDuanExamRequestIdQO.IncludeRequestDuans = true;
      this.Api_GET_ClubDuanExamRequestIdQO.IncludeOfficials = true;
      this.Api_GET_ClubDuanExamRequestIdQO.IncludeExam = true;
      this.Api_GET_ClubDuanExamRequestIdQO.IncludeRequestStatus = true;
      api_GET_ClubDuanExamRequestId(this.$route.query.id, this.Api_GET_ClubDuanExamRequestIdQO).then(res => {
        this.formData = res;
        this.declareDTO = res;
        this.loading = false;
        this.formData.duanIds = res.requestDuans.map(item => item.duanId);
        this.$refs.through.loading = false;
        // const arr2 = [];
        // this.declareDTO.requestOrganizationUnits.map(item => {
        //   return item.isHost ? arr1.push({ id: item.organizationUnitId, displayName: item.organizationUnitName }) : arr2.push({ id: item.organizationUnitId, displayName: item.organizationUnitName });
        // });

        this.organList = res.requestOrganizationUnits;
        if (res.requestStatusCode === 'Approved') {
          this.passbtn = true;
          this.$refs.through.btn = true;
          this.$refs.through.courseForm = res.officials;
          this.$refs.through.ApproveDuanExamRequestInput.examContentUrl = res.examContentUrl;
          this.$refs.through.ApproveDuanExamRequestInput.replyFileUrl = res.replyFileUrl;
          this.$refs.through.ApproveDuanExamRequestInput.approveComment = res.approveComment;
          this.$refs.through.loading = false;
        }
        if (res.requestStatusCode === 'NotApproved') {
          this.$refs.through.loading = false;
          this.throughbtn = true;
          this.$refs.Pass.btn = true;
          this.$refs.Pass.ApproveDuanExamRequestInput.approveComment = res.approveComment;
        }
      }, error => {
        this.$refs.through.loading = false;
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 通过
    through() {
      this.$refs.through.dialogVisible = true;
      this.$refs.through.loading = true;
      this.getGameInfo();
    },
    // 驳回
    pass() {
      this.$refs.Pass.dialogVisible = true;
    },
    // 处理地区显示
    handleAreaChange() {
      this.declareVO.provinceCode = this.areaList && this.areaList[0];
      this.declareVO.cityCode = this.areaList && this.areaList[1];
      this.declareVO.countyCode = this.areaList && this.areaList[2];
    },
    // 处理报名时间
    handleEntryTime() {
      this.declareVO.entryStartTime = this.entryTime && this.entryTime[0];
      this.declareVO.entryEndTime = this.entryTime && this.entryTime[1];
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 报名须知上传
    entryNoticeUploadSuccess(fileUrl) {
      this.$set(this.declareVO, 'entryNoticeUrl', fileUrl.tempUrl);
    },
    // 取消
    goBack() {
      this.$router.push({ name: 'Maintenance' });
    }
  }
};
</script>
<style scoped>
.noPadding {
  padding: 0px;
}
.top_title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #E8E8E8;
  font-size: 16px;
  font-weight: bold;
  padding-left: 25px;
}
.form_content {
  min-width: 960px;
  max-width: 1320px;
  min-height: 480px;
  padding: 75px 120px 15px;
  margin: 0 auto;
}
.func_btn {
  margin-top: 80px;
}
.upload_game_img {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.upload_game_img.border {
  border: 1px dotted #DCDFE6;
}
.upload_game_img:hover {
  border-color: #409eff;
}
.upload_game_img .show_img {
  max-height: 100%;
  border-radius: 4px;
  vertical-align: top;
}
.upload_game_img .img_text {
  font-size: 12px;
  color: rgba(0,0,0,0.65);
  text-align: center;
  position: absolute;
  top: 60px;
  line-height: 20px;
  width: 98px;
}
.img_text_under{
  font-size: 12px;
  color: rgba(0,0,0,0.65);
  text-align: center;
}
.el-checkbox {
  margin-right: 15px;
}
</style>
